<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header a{
      color: #666;
      text-decoration: none;
    }
    .el-main a{
      color: #666;
      text-decoration: none;
    }
    .el-main p{
      color: chocolate;
      font-weight: bold;
      font-size: 20px;
      padding: 0;
      margin-top: 0;
    }
    .el-table .el-table__cell{
      padding: 0;/*去掉自带的内边距*/
    }
    .c1{
      transition-duration: 0.5s;
    }
    .c1:hover{
      transform: scale(1.1);
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="80px">
      <div style="width:1200px;margin: 0 auto;border: 1px solid white">
        <div style="width: 300px;float: right;">
          <a href="/login.html">您好，请登录</a>
          <el-divider direction="vertical"></el-divider>
          <a href="/reg.html">免费注册</a>
          <el-divider direction="vertical"></el-divider>
          <a href="/select.html">订单查询</a>
        </div>
        <div style="float: left">
          <img src="imgs/logo.png" width="150px">
        </div>
        <div style="width:300px;margin: 30px 450px 0 450px">
          <el-input type="text" placeholder="请输入搜索的内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <div style="margin: 0 auto;font-size:10px">
            <a href="">玫瑰</a>
            <el-divider direction="vertical"></el-divider>
            <a href="">蛋糕</a>
            <el-divider direction="vertical"></el-divider>
            <a href="">康乃馨</a>
          </div>
        </div>
      </div>
    </el-header>
    <el-main>
      <div style="background-color:firebrick">
        <el-menu style="width: 1200px;margin: 0 auto" mode="horizontal"
                 background-color="firebrick" text-color="white"
                 active-text-color="#0f0" @select="handleSelect()">
          <el-menu-item index="1">
            <el-cascader
                    v-model="value"
                    :options="options"
                    @change="handleChange" placeholder="全部商品分类"></el-cascader></el-menu-item>
          <el-menu-item index="2">鲜花</el-menu-item>
          <el-menu-item index="3">花束</el-menu-item>
          <el-menu-item index="4">礼盒</el-menu-item>
          <el-menu-item index="5">蛋糕</el-menu-item>
          <el-menu-item index="6">花篮</el-menu-item>
          <el-menu-item index="7">绿植</el-menu-item>
        </el-menu>
      </div>
      <div style="width:1200px;margin: 0 auto">
        <el-carousel height="450px" >
          <el-carousel-item>
            <img src="imgs/a1.jpg" width="100%" height="100%">
          </el-carousel-item>
          <el-carousel-item>
            <img src="imgs/a2.jpg" width="100%" height="100%">
          </el-carousel-item>
          <el-carousel-item>
            <img src="imgs/a3.jpg" width="100%" height="100%">
          </el-carousel-item>
        </el-carousel>
        <img src="imgs/c.png" >
      </div>
      <div style="width: 1200px;height:40px;margin: 0 auto">
        <div style="float: left;height:30px;width: 100px;">
          <p>| 爱情鲜花</p>
        </div>
        <div style="float: right;height: 30px;width: 100px">
          <a href="">查看更多></a>
        </div>
      </div>
      <!--商品列表开始-->
      <el-row gutter="20" style="width: 1200px;margin: 0 auto;">
        <div style="overflow: hidden;float: left;width: 230px">
          <img src="imgs/b1.png" width="230" class="c1">
        </div>
        <div style="float: right;width: 960px">
        <el-col style="margin: 20px 0" span="6" v-for="p in productArr">
          <el-card class="c1">
            <img :src="p.url" width="100%">
            <p style="font-size: 14px">{{p.title}}</p>
            <p style="font-size: 12px">{{p.price}} <s> {{p.oldPrice}}</s>
              <span style="float: right">销量:{{p.saleCount}}</span>
            </p>
          </el-card>
        </el-col>
        </div>
      </el-row>
      <!--商品列表结束-->
    </el-main>
    <el-footer>

      <div style="text-align: center;background-color: firebrick;
      color: #b1b1b1; padding: 30px 0">
        <p>Copyright © 山东予花科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖百余种花卉，致力于为您提供各种各样的花卉平台</p>
        <p>予香在线WWW.TMOOC.CN 专注于给您带去花香</p>
      </div>
    </el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        productArr:[{title:"浪漫满屋",price:229,oldPrice:399,url:"imgs/c1.png",saleCount:2342},
          {title:"此生不渝",price:168,oldPrice:268,url:"imgs/c2.png",saleCount:4342},
          {title:"粉色公主",price:169,oldPrice:269,url:"imgs/c3.png",saleCount:3625},
          {title:"永恒回忆",price:329,oldPrice:449,url:"imgs/c4.png",saleCount:2254},
          {title:"为你心动",price:329,oldPrice:499,url:"imgs/c5.png",saleCount:2536},
          {title:"如约而至",price:538,oldPrice:699,url:"imgs/c6.png",saleCount:3463},
          {title:"你是唯一",price:699,oldPrice:899,url:"imgs/c7.png",saleCount:1546},
          {title:"幸福如约",price:689,oldPrice:899,url:"imgs/c8.png",saleCount:3434}],
        value: [],
        options: [{
          label: '用途',
          children: [{label: '爱情鲜花'},
            {label: '生日鲜花'},
            {label: '友情鲜花'},
            {label: '商务鲜花'},
            {label: '哀思鲜花'},
            {label: '道歉鲜花'},
            {label: '探病问候'},
            {label: '问候长辈'},
            {label: '感谢老师'},
          ]
        }, {label: '花材',
          children: [{label: '玫瑰'},
            {label: '百合'},
            {label: '康乃馨'},
            {label: '向日葵'},
            {label: '满天星'},
            {label: '郁金香'},
            {label: '菊花'},
            {label: '其他'}]},
          {value: 'ziyuan', label: '类别',children: [{label: '花束'},
              {label:'礼盒'},
              {label:'蛋糕'},
              {label:'花篮'},
              {label:'绿植'},
              {label:'周花'},
              {label:'手提花篮'},
              {label:'桌花'},
              {label:'其他'}]},
          {label: '枝数',children: [{label: '11支'},
              {label: '19枝'},
              {label: '21枝'},
              {label: '33枝'},
              {label: '52枝'},
              {label: '66枝'},
              {label: '99枝'},
              {label: '其他'},
            ]}]
      }
    },
    methods:{
      handleSelect(key,keyPath){
        console.log(key);
      },
      handleChange(value) {
        console.log(value);
      }
    }
  })
</script>
</html>